import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
// import styles from './ChooseModal.less';
import StandardTable from 'components/StandardTableN';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  Tag,
  message,
  Badge,
  Radio,
  TreeSelect,
  Icon,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;
const { CheckableTag } = Tag;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

@Form.create()
export default class GoodsModal extends PureComponent {
  constructor(props) {
    super(props);

    console.log('初始化数据', this.props.initValue);

  }

  state = {
    selectedRowKeys: []
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.contentIdList && (nextProps.contentIdList != this.props.contentIdList)) {
      console.log('父页面初始数据=========', nextProps.contentIdList);
      let newList = []
      for (let i = 0; i < nextProps.contentIdList.length; i++) {
        let one = {}
        one['goods_id'] = nextProps.contentIdList[i].goodsId;
        newList.push(one)
      }

      this.setState({ selectedRowKeys: newList })
    }
  }


  handleSelectRows = rows => {
    console.log('选择数据', rows)
    this.setState({ selectedRowKeys: rows })
  };

  onChange() {

  }

  _okHandle() {
    if (this.state.selectedRowKeys && (this.state.selectedRowKeys.length > 0)) {
      this.props.goodsOk(this.state.selectedRowKeys);
      this.props.setGoodsModalVisible(1, false)
    } else {
      message.error('请选择商品')
      return;
    }
  }

  _cancel() {
    this.props.setGoodsModalVisible(1, false);

    let newList = []
    for (let i = 0; i < this.props.contentIdList.length; i++) {
      let one = {}
      one['goods_id'] = this.props.contentIdList[i].goodsId;
      newList.push(one)
    }

    this.setState({
      selectedRowKeys: newList,
    })
  }

  _query() {
    this.props.goodsSearch(this.props.form.getFieldsValue())
  }

  render() {
    const { record } = this.props;

    const tableData = {};
    tableData['list'] = this.props.goodsList;
    tableData['pagination'] = { pagination: false };

    const columns = [
      {
        title: '商品ID',
        dataIndex: 'goods_id',
        key: 'goods_id',
      },
      {
        title: '内容名称',
        dataIndex: 'goods_name',
        key: 'goods_name',
      },
      {
        title: '所属App',
        dataIndex: 'appType',
        key: 'app',
        render(text, record) {
          return <span>{text == '1' ? '小萌早教' : text == '2' ? '小萌绘本' : text == '3' ? '萌萌乐视频' : text == '4' ? '萌萌乐儿歌' : '其他'}</span>;
        },
      },
      {
        title: '频道',
        dataIndex: 'channel_name',
        key: 'channel_name',
      },
      {
        title: '价格',
        dataIndex: 'price',
        key: 'price',
        render(val) {
          return val + '元'
        },
      },

    ]

    return (
      <Modal
        width={850}
        destroyOnClose
        title="选择商品"
        visible={this.props.goodsModalVisible}
        afterClose={() => { }}
        onOk={() => this._okHandle()}
        onCancel={() => this._cancel()}
      >
        <Form layout="inline">
          <Row >
            <Col md={6} >
              <FormItem labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label="所属App">
                {this.props.form.getFieldDecorator('appType', { initialValue: 'undefined' })(
                  <Select style={{ width: '100px' }}>
                    <Option value="undefined">全部</Option>
                    <Option value="1">小萌早教</Option>
                    <Option value="2">小萌绘本</Option>
                    <Option value="3">积分商城</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col md={6}>
              <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} label="频道">
                {this.props.form.getFieldDecorator('channelId', {
                  // rules: [{ required: true, message: '请选择频道' }],
                  initialValue: record ? record.channelId : null,
                })(<TreeSelect
                  style={{ width: '120px' }}
                  // value={this.state.value}
                  dropdownStyle={{ width: '100%', maxHeight: 300, overflow: 'auto' }}
                  treeData={this.props.channelTree}
                  placeholder="请选择"
                  treeDefaultExpandAll
                  onChange={this.onChange}
                />)}
              </FormItem>
            </Col>

            <Col md={6}>
              <FormItem labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label="商品名称">
                {this.props.form.getFieldDecorator('goodsName')(<Input style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col md={5}>
              <Button type="primary" htmlType="submit" onClick={() => this._query()} >
                查询
              </Button>
            </Col>
          </Row>
          <Row>
            {/* <Alert
              message={
                <Fragment>
                  已选择 <a style={{ fontWeight: 600 }}>{this.props.selectedRowKeys.length}</a> 项&nbsp;&nbsp;
              </Fragment>
              }
              type="info"
              showIcon
            /> */}
            {/* <div style={{ overflow: 'hidden' }}>
              <span style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" htmlType="submit" onClick={() => this._query()} >
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                  重置
                </Button>
              </span>
            </div> */}
          </Row>
        </Form>
        <div style={{ height: '400px', overflow: 'auto' }}>
          <StandardTable
            selectedRows={this.state.selectedRowKeys}
            // loading={loading}
            rowKey={"goods_id"}
            data={tableData}
            page={'no'}
            columns={columns}
            onSelectRow={this.handleSelectRows}
            onChange={this.handleStandardTableChange}
          />
        </div>


      </Modal>
    );
  }
}